{% load static %}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-5.3.0-alpha1-dist/css/bootstrap.css' %}">
    <style>
        .login-box{
            margin-top: 100px;
            margin-left: auto;
            margin-right: auto;
            width: 400px;
            border: 2px solid #ddd;
            border-radius: 5px;
            padding: 0 30px 30px 30px;
        }
        .login-box h1{
            text-align: center;
        }
    </style>
</head>

<body>
<!--action为提交地址，不设置默认提交到当前页面地址-->
<div class="login-box">
    <h1>用户登录</h1>
    <form method="post" >
        {% csrf_token %}
        <div class="form-floating">
            <select id="roleSelect" class="form-select" aria-label="Floating label select example">
                <option value="1">管理员</option>
                <option value="2">客户</option>
            </select>
            <label for="roleSelect">选择登录身份</label>
        </div>
        <div class="mb-3">
            <label for="mobileInput" class="form-label">手机号：</label>
            <input type="text" id="mobileInput" placeholder="请输入手机号" class="form-control"
                   aria-describedby="emailHelp">
        </div>
        <div class="mb-3">
            <label for="passwordInput" class="form-label">密码：</label>
            <input type="password" id="passwordInput" placeholder="请输入密码" class="form-control">
        </div>
        <div class="input-group mb-3">
            <input type="text" name="captcha" class="form-control" placeholder="请输入图片验证码" aria-label="Captcha"
                   aria-describedby="captcha-image">
            <span class="input-group-text" id="captcha-image">
                <img src="/api/accounts/captcha/image" style="width: 120px;">
            </span>
        </div>
        <a href="javascript:void(0);" id="registerBtn" class="btn btn-outline-secondary">注册</a>
        <button type="button" id="loginBtn" class="btn btn-outline-success">登录</button>
        <span style="color:red; ">{{ error }}</span>
    </form>
</div>


<script src="{% static 'plugins/bootstrap-5.3.0-alpha1-dist/js/bootstrap.js' %}"></script>
<script type="module" src="{% static 'js/login.js' %}"></script>
</body>
</html>